<!-- 消息窗口中聊天窗口中的每条消息组件 -->
<template>
	<view class="chatting-item-box">
		<!-- 时间节点 -->
		<view class="date-box" v-if="message.insertTime">
			<view class="date">{{message.insertTime}}</view>
		</view>
		<view :class="[message.isShow ? 'left-chat' : 'right-chat']">
			<!-- 左边的头像 -->
			<u-avatar class="avatar" size="81" :src="message.src" v-if="message.isShow"></u-avatar>
			<!-- 文本消息 -->
			<view class="text-container" v-if="message.text">
				<text :user-select="true" class="text">{{message.text}}</text>
			</view>
			<!-- 图片消息 -->
			<view class="img-box" v-if="message.image" @click="previewImage">
				<u-image width="300" height="300" :src="message.image" v-if="message.image"></u-image>
			</view>
			<!-- 右边的头像 -->
			<u-avatar class="avatar" size="81" :src="message.src || vuex_user.avatarUrl" v-if="!message.isShow"></u-avatar>
		</view>
	</view>
</template>

<script>
export default {
	name: 'chatting-item',
	props: {
		// 消息数据对象
		message: {
			type: Object,
			default() {
				return {}
			}
		},
	},
	data() {
		return {
			
		};
	},
	methods: {
		// 图片预览
		previewImage() {
			// 参数为被点击项的图片链接
			this.$emit('messageImageClick', this.message.image)
			// uni.previewImage({
			// 	current: this.message.image,
			// 	// 当前显示图片的http链接
			// 	urls: [this.message.image],
			// });
		}
	}
};
</script>

<style lang="scss" scoped>
	.chatting-item-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20rpx 0;
		.date-box {
			width: 100%;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #141418;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 20rpx;
			.date {
				padding: 5rpx 10rpx;
				background-color: rgba(255, 255, 255, .5);
			}
		}
	}
.left-chat {
	display: flex;
	padding: 0rpx 73rpx 0 30rpx;
	.text-container {
			margin-left: 35rpx;
			position: relative;
			&::before {
				position: absolute;
				top: 25rpx;
				left: -28rpx;
				content: ' ';
				width: 0;
				height: 0;
				/* 行高和字体设置为0是为了兼容浏览器的 */
				line-height: 0;
				font-size: 0;
				border: 15rpx solid transparent;
				// border-left-color: red; /* 顶点 朝右 的三角形 */
				border-right-color: white; /* 顶点 朝左 的三角形 */
				
			}
	}
	.img-box {
		margin-left: 15rpx;
		width: 300rpx;
		height: 300rpx;
		border-radius: 10px;
		overflow: hidden;
	}
}


.right-chat {
	display: flex;
	justify-content:  flex-end;
	padding: 0rpx 30rpx 0rpx 73rpx;
	// padding: 67rpx 30rpx 20rpx 73rpx;
	.text-container {
		margin-right: 35rpx;
		position: relative;
		background-color: $u-text-color;
		&::before {
			position: absolute;
			top: 25rpx;
			right: -28rpx;
			content: ' ';
			width: 0;
			height: 0;
			/* 行高和字体设置为0是为了兼容浏览器的 */
			line-height: 0;
			font-size: 0;
			border: 15rpx solid transparent;
			border-left-color: $u-text-color; /* 顶点 朝右 的三角形 */
			
		}
		// 我方的消息显示 白色
		.text {
			color: white!important;
		}
	}
	.img-box {
		margin-right: 15rpx;
		width: 300rpx;
		height: 300rpx;
		border-radius: 10px;
		overflow: hidden;
	}
}
.text-container {
	background-color: white;
	padding: 24rpx 29rpx;
	border-radius: 10rpx;
	.text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #141418;
		line-height: 41rpx;
	}
}
</style>
